<template>
	<view class="page-container">
		<!-- 主内容区 -->
		<scroll-view class="main-content" scroll-y>
			<!-- 工单状态标签 -->
			<view class="status-container">
				<view class="status-content">
					<view class="status-left">
						<text class="status-tag" :class="statusTagClass">
							{{ (orderData && orderData.statusText) ? orderData.statusText : '未知状态' }}
						</text>
						<text class="order-number">工单编号:
							{{ (orderData && orderData.orderNumber) ? orderData.orderNumber : '未知编号' }}</text>
					</view>
					<text class="submit-time">提交时间:
						{{ (orderData && orderData.reportTime) ? formatTime(orderData.reportTime) : '未知时间' }}</text>
				</view>
			</view>

			<!-- 原有工单图片展示区 -->
			<view class="image-section" v-if="validImages.length > 0">
				<text class="section-title">工单图片</text>
				<view class="image-grid">
					<view v-for="(img, index) in validImages" :key="index" class="image-item"
						@click="previewImage(img)">
						<image :src="img" :alt="'工单图片' + (index + 1)" class="image-content" mode="aspectFill"
							@error="handleImageError(index)" />
						<!-- 图片加载失败占位符 -->
						<view class="image-placeholder" v-if="imageErrors[index]">
							<text class="placeholder-text">图片加载失败</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 新增：已完成工单图片展示区（仅在有完成图片时显示） -->
			<view class="image-section" v-if="orderData && orderData.successImage && orderData.successImage.length > 0">
				<text class="section-title">已完成工单图片</text>
				<view class="image-grid">
					<view v-for="(img, index) in orderData.successImage" :key="index" class="image-item"
						@click="previewImage(img)">
						<image :src="img" :alt="'已完成工单图片' + (index + 1)" class="image-content" mode="aspectFill"
							@error="handleFinishImageError(index)" />
						<!-- 完成图片加载失败占位符 -->
						<view class="image-placeholder" v-if="finishImageErrors[index]">
							<text class="placeholder-text">图片加载失败</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 工单描述 -->
			<view class="card-section">
				<text class="section-title">工单描述</text>
				<view class="desc-content">
					<text
						class="desc-text">{{ (orderData && orderData.description) ? orderData.description : '无工单描述' }}</text>
				</view>
			</view>

			<!-- 已完成工单描述 -->
			<view class="card-section">
				<text class="section-title">已完成工单描述</text>
				<view class="desc-content">
					<text
						class="desc-text">{{ (orderData && orderData.successtext) ? orderData.successtext : '无已完成工单描述' }}</text>
				</view>
			</view>

			<!-- 报修位置信息 -->
			<view class="card-section">
				<text class="section-title">报修位置</text>
				<view class="location-content">
					<view class="location-info">
						<text class="location-icon">📍</text>
						<view class="location-text">
							<text
								class="address-main">{{ (orderData && orderData.unit) ? orderData.unit : '未知单位' }}</text>
							<text
								class="address-detail">{{ (orderData && orderData.location) ? orderData.location : '未知详细地址' }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 工单信息 -->
			<view class="card-section">
				<text class="section-title">工单信息</text>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">报修人</text>
						<text
							class="info-value">{{ (orderData && orderData.reporterName) ? orderData.reporterName : '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">联系电话</text>
						<text
							class="info-value">{{ (orderData && orderData.reporterPhone) ? orderData.reporterPhone : '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">报修类型</text>
						<text class="info-value">{{ (orderData && orderData.title) ? orderData.title : '未知类型' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">处理人</text>
						<text
							class="info-value">{{ (orderData && orderData.processor) ? orderData.processor : '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">报修来源</text>
						<text class="info-value">{{ (orderData && orderData.source) ? orderData.source : '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">评价</text>
						<text
							class="info-value">{{ (orderData && orderData.evaluateDetails) ? orderData.evaluateDetails : '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">建议或反馈</text>
						<text
							class="info-value">{{ (orderData && orderData.evaluatetext) ? orderData.evaluatetext : '未知' }}</text>
					</view>
				</view>
			</view>

			<!-- 处理进度 -->
			<view class="card-section progress-card">
				<text class="section-title">处理进度</text>
				<view class="progress-container">
					<view class="progress-line"></view>

					<!-- 进度节点1：工单已受理（固定显示） -->
					<view class="progress-item">
						<view class="progress-node">
							<text class="node-icon">✓</text>
						</view>
						<view class="progress-detail">
							<text class="progress-title">工单已受理</text>
							<text class="progress-desc">客服人员已接收工单并确认</text>
							<text
								class="progress-time">{{ (orderData && orderData.reportTime) ? formatTime(orderData.reportTime) : '未知时间' }}</text>
						</view>
					</view>

					<!-- 进度节点2：维修人员已派单（状态≠0时显示） -->
					<view class="progress-item" v-if="orderData && orderData.status && orderData.status !== '0'">
						<view class="progress-node">
							<text class="node-icon">✓</text>
						</view>
						<view class="progress-detail">
							<text class="progress-title">维修人员已派单</text>
							<text class="progress-desc">已安排维修人员前往处理</text>
							<text
								class="progress-time">{{ (orderData && orderData.reportTime) ? formatTime(orderData.reportTime, 15) : '未知时间' }}</text>
						</view>
					</view>

					<!-- 进度节点3：动态状态（根据当前状态显示） -->
					<view class="progress-item"
					  v-if="orderData && orderData.status && ['0', '1', '2', '3'].includes(orderData.status)">
					  <view class="progress-node">
					    <text class="node-icon">✓</text>
					  </view>
					  <view class="progress-detail">
					    <text class="progress-title">
					      <!-- 标题文本判断逻辑 -->
					      {{ orderData.status === '1' ? '维修人员正在处理' : 
					         (orderData.status === '2' || orderData.status === '3') ? '维修人员已完成' : 
					         (orderData.statusText === '待处理' ? '等待维修人员接单' : '') }}
					    </text>
					    <text class="progress-desc">
					      <!-- 描述文本判断逻辑 -->
					      {{ orderData.status === '1' ? '维修人员正在处理您的工单，请耐心等待' : 
					         (orderData.status === '2' || orderData.status === '3') ? '维修人员已完成工单处理' : 
					         (orderData.statusText === '待处理' ? '系统已接收工单，正在等待维修人员接单' : '') }}
					    </text>
					    <text class="progress-time">
					      {{ (orderData && orderData.reportTime) ? formatTime(orderData.reportTime, 30) : '未知时间' }}
					    </text>
					  </view>
					</view>
					<!-- 进度节点4：已完成 -->
					<view class="progress-item" v-if="orderData && ['2', '3'].includes(orderData.status)">
						<view class="progress-node">
							<text class="node-icon">✓</text>
						</view>
						<view class="progress-detail">
							<text class="progress-title">工单已完成</text>
							<text class="progress-desc">维修已完成，感谢您的耐心等待</text>
							<text class="progress-time">
								{{ (orderData && orderData.workorder && orderData.workorder.reportTime) ? formatTime(orderData.workorder.reportTime) : formatTime(new Date()) }}
							</text>
						</view>
					</view>

					<!-- 新增：进度节点5：等待验收（在已完成节点后显示） -->
					<view class="progress-item" v-if="orderData && ['2'].includes(orderData.status)">
						<view class="progress-node">
							<text class="node-icon">{{ orderData.status === '2' ? '↻' : '✓' }}</text>
						</view>
						<view class="progress-detail">
							<text class="progress-title">等待验收</text>
							<text class="progress-desc">维修工作已完成，正在等待验收确认</text>
							<text
								class="progress-time">{{ (orderData && orderData.workorder && orderData.workorder.checkTime) ? formatTime(orderData.workorder.checkTime) : formatTime(new Date()) }}</text>
						</view>
					</view>

					<!-- 新增：进度节点6：工单关闭（状态=3时显示） -->
					<view class="progress-item" v-if="orderData && orderData.status === '3'">
						<view class="progress-node">
							<text class="node-icon">✓</text>
						</view>
						<view class="progress-detail">
							<text class="progress-title">工单关闭</text>
							<text class="progress-desc">工单已完成所有流程，正式关闭</text>
							<text
								class="progress-time">{{ (orderData && orderData.workorder && orderData.workorder.closeTime) ? formatTime(orderData.workorder.closeTime) : formatTime(new Date()) }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部接单按钮区域 -->
		<view class="bottom-button-bar" v-if="showAcceptButton">
			<button class="accept-button" @click="handleAcceptOrder">
				<text class="button-text">接单处理</text>
			</button>
		</view>

		<!-- 底部完成按钮（当状态为1时显示） -->
		<view class="bottom-button-bar" v-if="orderData && orderData.status === '1' && !orderData.isRepairPage">
			<button class="complete-button" @click="openCompleteDescPopup">
				<text class="button-text">完成并拍照</text>
			</button>
		</view>

		<!-- 底部再次报修和评价服务按钮（仅在isRepairPage为true且状态为2时显示） -->
		<view class="bottom-actions-bar"
			v-if="orderData && orderData.isRepairPage && ['2', '3'].includes(orderData.status)">
			<button class="action-button repair-again" @click="handleRepairAgain">
				<text class="button-text">申请返修</text>
			</button>

			<button class="action-button evaluate-service" @click="openRatingModal" :disabled="orderData.status === '3'"
				:style="{ backgroundColor: orderData.status === '3' ? '#8a8a8a' : '#2BA245' }">
				<text class="button-text">
					{{ orderData.status === '2' ? '评价服务' : '已评价' }}
				</text>
			</button>
		</view>

		<!-- 自定义评分弹窗 -->
		<view class="rating-modal" v-if="showRatingModal">
			<view class="modal-backdrop" @click="closeRatingModal" />
			<view class="modal-content">
				<text class="title">服务评价</text>
				<!-- 星级 -->
				<view class="stars">
					<uni-rate :value="rateValue === 0 ? orderData.starLevel : rateValue"
						 disabledColor="#F2F11B" @change="onChange" />
				</view>
				<text class="label">哪些方面让您满意？（可多选）</text>
				<view class="tags">
					<text v-for="tag in ratingTags" :key="tag"
						:class="['tag', selectedTags.includes(tag) ? 'active' : '']"
						@click="toggleTag(tag)">{{ tag }}</text>
				</view>
				<textarea v-model="comment" placeholder="请分享您的体验细节或改进建议…" auto-height />
				<button class="btn-submit"
					@click="submitRating">{{ this.orderData.status === '2' ? '已评价' : '评价服务' }}</button>
				<button class="btn-cancel" @click="closeRatingModal">取消</button>
			</view>
		</view>

		<!-- 图片预览模态框 -->
		<view v-if="showImageModal" class="image-modal" @click="closeImageModal">
			<button class="close-button" @click.stop="closeImageModal">
				<text class="close-icon">×</text>
			</button>
			<view class="modal-content">
				<image :src="currentPreviewImage" mode="aspectFit" class="preview-image" />
			</view>
		</view>

		<!-- 引入封装的再次报修弹窗组件 -->
		<RepairPopup ref="repairPopupComponent" :order-number="orderData ? orderData.orderNumber : ''" />

		<!-- 引入完成工单描述组件（使用正确的组件名） -->
		<CompleteOrderPopup ref="completeOrderPopupComponent" :order-number="orderData ? orderData.orderNumber : ''"
			:order-id="orderData ? orderData.id : ''" @orderCompleted="handleOrderCompleted" />
	</view>
</template>

<script>
	// 引入封装的弹窗组件
	import RepairPopup from '@/component/RepairPopup.vue';
	import CompleteOrderPopup from '@/component/CompleteOrderPopup.vue';
	import {
		getjieDanList,
		uploadImage,
		repairTicket,
		evaluateTicket,
		completeTicket
	} from "./repairDetail.js";
	export default {
		components: {
			RepairPopup, // 注册组件
			CompleteOrderPopup
		},
		data() {
			return {
				showImageModal: false,
				currentPreviewImage: '',
				orderData: null,
				showAcceptButton: true,
				imageErrors: {}, // 原有工单图片加载失败状态
				finishImageErrors: {}, // 已完成图片加载失败状态（支持多个图片）
				showCompleteButton: false,
				showRatingModal: false, // 控制评分弹窗的显示与隐藏
				rateValue: this.orderData?.starLevel || 0, // 评分星级
				selectedTags: [], // 选中的评价标签
				comment: '', // 评价内容
				repairReason: '', // 存储用户输入的返修原因
				completeDesc: '', // 完成工单描述内容
				ratingTags: ['服务态度好', '维修速度快', '技术专业', '沟通顺畅', '价格合理'], // 评价标签选项
				// 状态文本映射
				statusTextMap: {
					'0': '待处理',
					'1': '处理中',
					'2': '待验收',
					'3': '已完成', // 关键：后端定义3为已完成
					'4': '已驳回', // 原已完成的4改为已驳回（根据实际调整）
					'5': '已终止',
					'7': '待评价'
				}
			};
		},
		computed: {
			// 原有工单图片（仅过滤有效路径）
			validImages() {
				if (!this.orderData || !this.orderData.images) return [];
				// 将images转换为数组（如果不是数组）
				const images = Array.isArray(this.orderData.images) ?
					this.orderData.images : [this.orderData.images];

				// 过滤有效图片URL，确保每个元素都是字符串
				return images.filter(img =>
					typeof img === 'string' &&
					(img.startsWith('http') || img.startsWith('/') || img.startsWith('wxfile://'))
				);
			},
			// 状态标签样式
			statusTagClass() {
				const statusText = this.orderData && this.orderData.statusText;
				if (statusText === '待审批' || statusText === '待验收') return 'status-pending-review';
				if (statusText === '处理中') return 'status-processing';
				if (statusText === '待处理') return 'status-pending';
				if (statusText === '已完成') return 'status-completed';
				if (statusText === '已终止') return 'status-terminated';
				return '';
			},
			// 动态确定显示的图片路径
			showImageUrl() {
				if (!this.orderData) return '';
				// 优先使用successImage的第一个元素
				if (this.orderData.successImage && Array.isArray(this.orderData.successImage) && this.orderData
					.successImage.length > 0) {
					return this.orderData.successImage[0];
				}
				return '';
			},
		},
		onLoad(options) {
			if (options && options.order) {
				try {
					const decodedData = decodeURIComponent(options.order);
					const order = JSON.parse(decodedData);
					this.setOrderData(order);
				} catch (error) {
					console.error('解析工单数据失败：', error);
					uni.showToast({
						title: '数据解析失败',
						icon: 'none'
					});
				}
			} else {
				console.warn('未接收到order参数');
				uni.showToast({
					title: '未获取到工单数据',
					icon: 'none'
				});
			}
		},
		methods: {
			onChange(e) {
				// 获取选中的星级值（通常是1-5的数字）
				const selectedValue = e.detail?.value || e.value || e;
				// 更新数据，触发视图重新渲染
				this.rateValue = selectedValue;
				// 可选：实时更新到订单数据中
				// this.orderData.starLevel = selectedValue;
				console.log("选中的星级：", selectedValue);
			},

			setOrderData(order) {
				// 适配后端字段：image（JSON字符串数组）→ images（解析后的数组）
				if (order.image) {
					try {
						// 将JSON字符串解析为数组
						order.images = JSON.parse(order.image);
					} catch (e) {
						console.error('解析image字段失败：', e);
						order.images = []; // 解析失败时设为空数组
					}
					delete order.image;
				}
				// 状态转为字符串
				order.status = String(order.status);
				// 状态文本映射
				if (order.subStatus === 3) {
					order.statusText = '待审批';
				} else if (order.subStatus === 4) {
					order.statusText = this.statusTextMap['2'];
				} else {
					order.statusText = this.statusTextMap[order.status] || '未知状态';
				}

				// 控制按钮显示
				this.showAcceptButton = order && order.status === '0' && !order.isRepairPage;
				this.showCompleteButton = order && order.subStatus;
				this.orderData = order;
			},

			// 接单逻辑
			async handleAcceptOrder() {
				if (!this.orderData?.id) {
					uni.showToast({
						title: '工单ID不存在',
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					title: '确认接单',
					content: '您确定要接取此工单吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({
									title: '提交中...'
								});
								const res = await getjieDanList(this.orderData.id);
								if (res.success) {
									uni.showToast({
										title: '接单成功',
										icon: 'success'
									});
									setTimeout(() => uni.navigateBack({
										delta: 1
									}), 300);
									this.orderData.status = '1';
									this.orderData.statusText = '处理中';
									this.showAcceptButton = false;
								} else {
									uni.showToast({
										title: res.msg || '接单失败',
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('接单失败:', error);
								uni.showToast({
									title: '网络异常',
									icon: 'none'
								});
							} finally {
								uni.hideLoading();
							}
						}
					}
				});
			},

			// 格式化时间
			formatTime(timestamp, addMinutes = 0) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				date.setMinutes(date.getMinutes() + addMinutes);
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')} ${date.getHours().toString().padStart(2,'0')}:${date.getMinutes().toString().padStart(2,'0')}`;
			},

			// 图片预览（支持原有图片和完成图片）
			previewImage(imgUrl) {
				this.currentPreviewImage = imgUrl;
				this.showImageModal = true;
			},
			closeImageModal() {
				this.showImageModal = false;
				this.currentPreviewImage = '';
			},

			// 打开完成工单描述弹窗
			openCompleteDescPopup() {
				this.$nextTick(() => {
					if (this.$refs.completeOrderPopupComponent) {
						// 调用组件的方法
						this.$refs.completeOrderPopupComponent.openCompleteDescPopup();
					} else {
						console.error('CompleteOrderPopup 组件引用不存在');
						uni.showToast({
							title: '操作失败，请重试',
							icon: 'none'
						});
					}
				});
			},

			// 处理工单完成事件（添加这个方法）
			handleOrderCompleted(result) {
				if (result.success) {
					// 更新本地订单数据
					if (this.orderData) {
						this.orderData.status = '2'; // 更新为待验收状态
						this.orderData.statusText = '待验收';

						// 如果有完成图片，更新订单图片数据
						if (result.finishPicture) {
							this.orderData.successImage = this.orderData.successImage || [];
							this.orderData.successImage.push(result.finishPicture);
						}

						// 更新工单完成时间和描述
						this.orderData.completeTime = new Date().toISOString();
						this.orderData.completeDesc = result.completeDesc;
					}

					// 显示成功提示
					uni.showToast({
						title: '工单已完成',
						icon: 'success',
						duration: 2000
					});

					// 可以选择跳转到工单列表页或刷新当前页面
					setTimeout(() => {
						uni.navigateBack(); // 或者刷新当前页面
					}, 2000);
				} else {
					// 处理失败情况
					console.error('完成工单失败:', result.error);
					uni.showToast({
						title: '完成工单失败，请重试',
						icon: 'none'
					});
				}
			},

			// 原有工单图片加载失败处理
			handleImageError(index) {
				this.$set(this.imageErrors, index, true);
			},

			// 已完成图片加载失败处理（支持多个图片）
			handleFinishImageError(index) {
				this.$set(this.finishImageErrors, index, true);
			},

			handleRepairAgain() {
				if (!this.orderData?.id) {
					uni.showToast({
						title: '工单ID不存在',
						icon: 'none'
					});
					return;
				}
				// 调用组件的 open 方法打开弹窗
				this.$refs.repairPopupComponent.open();
				// 清空之前可能输入的内容
				this.repairReason = '';

			},

			// 打开评分弹窗
			openRatingModal() {
				this.showRatingModal = true;
				// 打印数据，确认有值
				console.log('弹窗显示时的rateValue：', this.rateValue);
				console.log('弹窗显示时的starLevel：', this.orderData?.starLevel);
			},
			// 关闭评分弹窗
			closeRatingModal() {
				this.showRatingModal = false;
			},
			// 切换标签选中状态
			toggleTag(tag) {
				const i = this.selectedTags.indexOf(tag);
				if (i === -1) this.selectedTags.push(tag);
				else this.selectedTags.splice(i, 1);
			},


			// 提交评价
			// repairDetail.vue 的 submitRating 方法
			async submitRating() {
				uni.showLoading({
					title: '提交中…'
				});
				try {
					await evaluateTicket(
						this.orderData.orderNumber,
						this.rateValue,
						this.selectedTags,
						this.comment
					);
					uni.showToast({
						title: '评价成功，感谢您的反馈！',
						icon: 'success'
					});

					// 关键：获取上一级页面实例，标记需要刷新
					const pages = getCurrentPages(); // 获取当前页面栈
					if (pages.length > 1) {
						const prevPage = pages[pages.length - 2]; // 上一级页面实例
						prevPage.$vm.needRefresh = true; // 给上一级页面添加刷新标识
					}

					// 延迟返回，确保用户看到成功提示
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						}); // 返回上一级
					}, 1200);

				} catch (err) {
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
					this.showRatingModal = false;
				}
			},
		}
	};
</script>

<style>
	/* 基础布局样式 */
	.page-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f7fa;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-sserif;
	}

	.main-content {
		flex: 1;
		padding: 16px;
		padding-bottom: 150px;
		/* 增加底部间距，避免按钮遮挡内容 */
		box-sizing: border-box;
	}

	/* 公共卡片样式 */
	.status-container,
	.image-section,
	.card-section {
		background: #fff;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	/* 状态容器 */
	.status-content {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.status-left {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px;
	}

	.status-tag {
		font-size: 13px;
		padding: 4px 10px;
		border-radius: 20px;
		color: #fff;
		white-space: nowrap;
	}

	.order-number {
		font-size: 14px;
		color: #666;
	}

	.submit-time {
		font-size: 14px;
		color: #999;
	}

	/* 图片区域 */
	.section-title {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		margin-bottom: 16px;
		display: block;
		padding-left: 2px;
	}

	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.image-item {
		width: calc(33.33% - 7px);
		position: relative;
		border-radius: 8px;
		overflow: hidden;
		aspect-ratio: 1;
		background: #f3f4f6;
		transition: transform 0.2s;
	}

	.image-item:active {
		transform: scale(0.98);
	}

	.image-content {
		width: 100%;
		height: 100%;
	}

	/* 图片加载失败样式 */
	.image-placeholder {
		position: absolute;
		inset: 0;
		background: #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px dashed #ddd;
	}

	.placeholder-text {
		font-size: 12px;
		color: #999;
	}

	/* 进度卡片特殊处理 */
	.progress-card {
		margin-bottom: 0;
	}

	/* 描述区域 */
	.desc-content {
		background: #f5f7fa;
		border-radius: 8px;
		padding: 14px;
	}

	.desc-text {
		font-size: 15px;
		line-height: 1.6;
		color: #666;
	}

	/* 位置信息 */
	.location-content {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.location-info {
		display: flex;
		align-items: flex-start;
	}

	.location-icon {
		margin-right: 12px;
		font-size: 20px;
		color: #1677ff;
		margin-top: 1px;
	}

	.location-text {
		flex: 1;
	}

	.address-main {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		display: block;
		margin-bottom: 4px;
	}

	.address-detail {
		font-size: 14px;
		color: #666;
		display: block;
		line-height: 1.5;
	}

	/* 工单信息网格 */
	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 12px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.info-label {
		font-size: 14px;
		color: #999;
	}

	.info-value {
		font-size: 15px;
		color: #333;
	}

	/* 进度条样式 */
	.progress-container {
		position: relative;
		padding-left: 30px;
		padding-bottom: 8px;
	}

	.progress-line {
		position: absolute;
		left: 12px;
		top: 0;
		bottom: 0;
		width: 2px;
		background: #e5e7eb;
	}

	.progress-item {
		position: relative;
		padding: 10px 0;
	}

	.progress-node {
		position: absolute;
		left: -30px;
		top: 18px;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #1677ff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3);
	}

	.progress-node.current {
		background: #fff;
		color: #1677ff;
		border: 2px solid #1677ff;
	}

	.node-icon {
		font-size: 14px;
	}

	.progress-detail {
		background: #f5f7fa;
		padding: 14px;
		border-radius: 8px;
	}

	.progress-title {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		display: block;
		margin-bottom: 6px;
	}

	.progress-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
		display: block;
		margin-bottom: 8px;
	}

	.progress-time {
		font-size: 13px;
		color: #999;
		display: block;
	}

	/* 图片预览模态框 */
	.image-modal {
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.9);
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 让内容可滚动（防止超长图溢出） */
		overflow: auto;
	}

	.close-button {
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 101;
		background: rgba(0, 0, 0, 0.3);
		border: none;
		color: #ffffff;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 关键：水平居中 */
		backdrop-filter: blur(4px);
	}

	.close-icon {
		display: flex;
		/* 关键：转为flex布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		font-size: 25px;
		/* 稍微加大图标 */
		color: #fff;
		line-height: 1;
		/* 确保行高正常 */
	}

	.modal-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		box-sizing: border-box;
	}

	.preview-image {
		/* 让图片占满容器，保持比例并裁剪溢出 */
		width: 100%;
		height: 100%;
		object-fit: contain;
		/* 或者用 cover：按比例填充，裁剪超出部分 */
		/* object-fit: cover; */
		border-radius: 8px;
	}

	/* 底部按钮 */
	.bottom-button-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 16px;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 90;
	}

	.accept-button {
		width: 100%;
		height: 50px;
		background-color: #1677ff;
		color: #fff;
		border-radius: 25px;
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s;
	}

	.accept-button:active {
		background-color: #0958d9;
	}

	.complete-button {
		width: 100%;
		height: 50px;
		background-color: #2BA245;
		color: #fff;
		border-radius: 25px;
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 0.2s;
	}

	.complete-button:active {
		background-color: #1d7d34;
	}

	.button-text {
		display: inline-block;
	}

	/* 状态标签颜色 */
	.status-pending {
		background-color: #FF9800;
	}

	.status-processing {
		background-color: #2196F3;
	}

	.status-pending-review {
		background-color: #FFC107;
	}

	.status-completed {
		background-color: #2BA245;
	}

	.status-terminated {
		background-color: #F44336;
	}

	.bottom-actions-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 16px;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 90;
		display: flex;
		gap: 12px;
	}

	.action-button {
		flex: 1;
		height: 50px;
		border-radius: 25px;
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity 0.2s;
	}

	.action-button:active {
		opacity: 0.8;
	}

	.repair-again {
		background-color: #f5f7fa;
		color: #333;
		border: 1px solid #e5e7eb;
	}

	.evaluate-service {
		background-color: #1677ff;
		color: #fff;
	}

	/* 新增弹窗样式（替换原.rating-modal 相关，重点优化排版） */
	.rating-modal {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.modal-content {
		position: relative;
		/* 适当放宽适配更多场景 */
		max-width: 650px;
		background: #fff;
		border-radius: 16px;
		/* 加大圆角更柔和 */
		padding: 32px;
		/* 增加内边距，让内容呼吸感更足 */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 整体内容水平居中 */
	}

	.title {
		font-size: 20px;
		/* 加大标题层级 */
		font-weight: 600;
		/* 增强标题视觉 */
		text-align: center;
		margin-bottom: 24px;
		color: #333;
		/* 明确文字颜色 */
	}

	.stars {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 20px;
	}

	.icon {
		font-size: 32px;
		/* 放大星级图标 */
		color: #f5a623;
		margin: 0 8px;
		/* 加大间距 */
		cursor: pointer;
		/* 鼠标悬浮提示可点击 */
		transition: transform 0.2s;
		/* 增加点击反馈动效 */
	}

	.icon:active {
		transform: scale(0.9);
		/* 点击缩放反馈 */
	}

	.label {
		font-size: 15px;
		margin-bottom: 16px;
		display: block;
		color: #666;
		/* 区分次要文字颜色 */
		text-align: center;
		/* 文字居中 */
		line-height: 1.4;
		/* 优化行高 */
	}

	.tags {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		/* 加大标签间距 */
		margin-bottom: 20px;
		justify-content: center;
		/* 标签组水平居中 */
	}

	.tag {
		padding: 8px 16px;
		/* 加大标签点击区域 */
		border: 1px solid #ccc;
		border-radius: 20px;
		/* 加大标签圆角 */
		font-size: 14px;
		white-space: nowrap;
		color: #666;
		/* 未选中时统一文字色 */
		transition: all 0.2s;
		/* 点击动效过渡 */
	}

	.tag.active {
		background: #1677ff;
		color: #fff;
		border-color: #1677ff;
		transform: scale(1.05);
		/* 选中时轻微放大 */
	}

	.tag:active {
		opacity: 0.8;
		/* 点击透明度反馈 */
	}

	textarea {
		width: 100%;
		min-height: 100px;
		/* 增加输入高度 */
		border: 1px solid #ddd;
		border-radius: 10px;
		/* 加大输入框圆角 */
		padding: 12px;
		/* 优化输入内边距 */
		margin-bottom: 24px;
		font-size: 14px;
		box-sizing: border-box;
		color: #333;
		/* 输入文字颜色 */
		line-height: 1.6;
		/* 优化行高 */
		resize: none;
		/* 禁止手动拉伸 */
	}

	.btn-submit,
	.btn-cancel {
		width: 60%;
		/* 按钮适度收缩，避免太宽 */
		margin-bottom: 12px;
		border-radius: 25px;
		height: 48px;
		/* 加大按钮高度 */
		line-height: 48px;
		text-align: center;
		font-size: 16px;
		/* 加大按钮文字 */
		transition: all 0.2s;
	}

	.btn-submit {
		background: #1677ff;
		color: #fff;
	}

	.btn-submit:active {
		background: #0958d9;
		/* 点击加深背景 */
	}

	.btn-cancel {
		color: #666;
		background: #f5f5f5;
	}

	.btn-cancel:active {
		background: #e8e8e8;
		/* 点击加深背景 */
	}

	/* 强制穿透修复基础显示问题 */
	::v-deep .uni-rate {
		/* 确保组件可见性 */
		opacity: 1 !important;
		visibility: visible !important;
		/* 重置默认间距，适配弹窗布局 */
		margin: 10px 0;
	}

	/* 星级项基础样式 */
	::v-deep .uni-rate__item {
		/* 让星星可点击区域更大，优化交互 */
		padding: 4px;
	}

	/* 未选中星星样式（与项目主题色适配） */
	::v-deep .uni-icon--star-empty {
		color: #dcdcdc;
		/* 浅灰色未选中 */
		font-size: 28px;
		/* 放大星星尺寸 */
	}

	/* 选中星星样式（与项目主题色#1677ff适配） */
	::v-deep .uni-icon--star-full {
		color: #ffca28;
		/* 暖黄色高亮，比主题色更醒目 */
		font-size: 28px;
	}
</style>